<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../../static/js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/utils.js"></script>
    <style>
        .el-dialog {
            position: relative;
            margin: 0 auto 50px;
            background: #FFF;
            border-radius: 2px;
            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            box-sizing: border-box;
            width: 70%;
        }

        .el-color-picker__icon, .el-input, .el-textarea {
            display: inline-block;
            width: 50%;
        }

        .demo-form-inline .el-form-item{
            width: 250px;
        }

        .demo-form-inline .el-form-item input{
            width: 150px;
        }

        .el-date-editor.el-input, .el-date-editor.el-input__inner {
             width: 1px;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <el-row :gutter="20">
            <el-col :span="12" :offset="8">
                <h1 style="color: rgb(78, 78, 250);">新增订单</h1>
            </el-col>
        </el-row>

        <el-form :inline="true" :model="formData" class="demo-form-inline">
            <el-form-item label="编号:">
                <el-input disabled v-model="formData.orderid" placeholder="编号"></el-input>
            </el-form-item>
            <el-form-item label="客户:">
                <el-link type="success" @click="lookOver">查看<i class="el-icon-view el-icon--right"></i></el-link>
                <el-input disabled v-model="formData.clientName" placeholder="客户"></el-input>
            </el-form-item>
            <el-form-item label="要货日期:" style="width: 340px" width="400px">
                <el-date-picker @change="ifDate" v-model="formData.createtime" type="date" placeholder="要货日期"></el-date-picker>
                <el-link @click="lookCarParts" style="margin-left: 180px;" type="success" icon="el-icon-edit">添加零件</el-link>
            </el-form-item>
        </el-form>
        <el-table heigth="200" max-height="200" :data="particularsData">
            <el-table-column property="partcode" label="编号" width="150"></el-table-column>
            <el-table-column property="partname" label="名称" width="150"></el-table-column>
            <el-table-column property="saleprice" label="单价" width="150"></el-table-column>
            <el-table-column property="ordercount" label="订购数量" width="150"></el-table-column>
            <el-table-column property="paycount" label="已付数量" width="150">
                <template slot-scope="scope">
                    {{0}}
                </template>
            </el-table-column>
            <el-table-column property="totalprice" label="总价" width="150">
                <template slot-scope="scope">
                    {{scope.row.saleprice * scope.row.ordercount}}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="updates(scope.$index,particularsData)" type="text" size="small">修改</el-button>
                    <el-button @click="deletes(scope.$index,particularsData)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button @click="add" type="primary">创建</el-button>

        <el-dialog width="80%" title="全部客户" :visible.sync="innerVisible" append-to-body>
            <el-table :data="clientData">
                <el-table-column property="clientname" label="名称" width="150"></el-table-column>
                <el-table-column property="linkman" label="联系人" width="150"></el-table-column>
                <el-table-column property="phonenumber" label="电话号码" width="150"></el-table-column>
                <el-table-column property="postalcode" label="邮政编码" width="150"></el-table-column>
                <el-table-column property="type" label="类型" width="150"></el-table-column>
                <el-table-column label="详细信息" width="200">
                    <template slot-scope="scope">
                        <el-button @click="clientParticulars(scope.row.id)" type="text" size="small">详细信息</el-button>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="选择" width="200">
                    <template slot-scope="scope">
                        <el-button @click="selectClient(scope.row)" type="text" size="small">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog width="90%" title="客户详情" :visible.sync="innerVisibleClient" append-to-body>
                <el-descriptions class="margin-top" :column="2" border>
                    <el-descriptions-item label="客户编号">{{clientForm.clientnumber}}</el-descriptions-item>
                    <el-descriptions-item label="客户名称">{{clientForm.clientname}}</el-descriptions-item>
                    <el-descriptions-item label="简称">{{clientForm.shortcut}}</el-descriptions-item>
                    <el-descriptions-item label="客户经理">{{clientForm.clientmanager}}</el-descriptions-item>
                    <el-descriptions-item label="联系人">{{clientForm.linkman}}</el-descriptions-item>
                    <el-descriptions-item label="电话号码">{{clientForm.phonenumber}}</el-descriptions-item>
                    <el-descriptions-item label="邮政编码">{{clientForm.postalcode}}</el-descriptions-item>
                    <el-descriptions-item label="客户地址">{{clientForm.clientaddress}}</el-descriptions-item>
                    <el-descriptions-item label="电子邮箱">{{clientForm.email}}</el-descriptions-item>
                    <el-descriptions-item label="开户银行">{{clientForm.openbank}}</el-descriptions-item>
                    <el-descriptions-item label="银行账号">{{clientForm.bandnumber}}</el-descriptions-item>
                    <el-descriptions-item label="税号">{{clientForm.taxnumber}}</el-descriptions-item>
                    <el-descriptions-item label="省份">{{clientForm.province}}</el-descriptions-item>
                    <el-descriptions-item label="类型">{{clientForm.type}}</el-descriptions-item>
                    <el-descriptions-item label="备注">{{clientForm.remark}}</el-descriptions-item>
                </el-descriptions>
            </el-dialog>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="100"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-dialog>

        <el-dialog width="80%" title="全部零件" :visible.sync="dialogTableVisible" append-to-body>
            <el-table :data="tableData3" style="width: 100%">
                <el-table-column prop="partcode" label="零件编号" width="150"></el-table-column>
                <el-table-column prop="partname" label="零件名称" width="150"></el-table-column>
                <el-table-column prop="partplacecode" label="货位号" width="150"></el-table-column>
                <el-table-column prop="partstore" label="当前库存量" width="150"></el-table-column>
                <el-table-column prop="saleprice" label="价格" width="150"></el-table-column>
                <el-table-column fixed="right" label="选择" width="200">
                    <template slot-scope="scope">
                        <el-button @click="selectCarParts(scope.row)" type="text" size="small">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="100"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-dialog>

        <el-dialog width="80%" title="添加购买零件数" :visible.sync="dialogTableVisibleCarParts" append-to-body>
            <el-form :inline="true" :model="carPartsForm" class="demo-form-inline">
                <el-form-item label="零件编号:">
                    <el-input readonly v-model="carPartsForm.partcode" placeholder="编号"></el-input>
                </el-form-item>
                <el-form-item label="零件名称:">
                    <el-input readonly v-model="carPartsForm.partname" placeholder="零件名称"></el-input>
                </el-form-item>
                <el-form-item label="单价:" style="width: 340px" width="400px">
                    <el-input  readonly v-model="carPartsForm.price" placeholder="单价"></el-input>
                </el-form-item>
                <el-form-item label="请输入购买数量:" style="width: 340px" width="400px">
                    <el-input type="number" v-model="carPartsForm.ordercount" placeholder="购买数量"></el-input>
                </el-form-item>
                <el-form-item style="width: 340px" width="400px">
                    <el-button type="primary" v-show="addBtn" @click="submitCar">添 加</el-button>
                    <el-button type="primary" v-show="updateBtn" @click="updateCar">修 改</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            id: 0,
            page: 1,
            limit: 5,
            total: 0,
            currentPage1: 1,
            statusSelect: 0,
            updateCarIndex: 0, // 修改下镖
            particularsData: [],//购买零件数
            userId: localStorage.getItem("id"), //获取管理员id
            dialogTableVisibleCarParts: false,//添加购买零件数
            dialogTableVisible: false,
            innerVisible: false,//查看客户
            innerVisibleClient: false,//客户详情
            addBtn: false,//添加按钮
            updateBtn: false,//修改按钮
            clientData:[],//全部客户
            clientForm:{},//客户详情
            tableData3: [],//全部零件
            formData:{
                orderid: '',
                clientId: '',
                clientName: '',
                creator: '',
                createtime: '',
                particularsData : [],
            },
            carPartsForm:{
                partstableId: '',
                partcode: '',
                partname: '',
                price: '',
                ordercount: 0,
            }
        },
        methods: {
            add(){
                let _this = this;
                let orderId = _this.generateRandomValue();
                _this.formData.orderid = orderId;
                _this.formData.particularsData = _this.particularsData;
                _this.formData.creator = _this.userId;
                addOrUpdateAjax("post","/orderstable/add",_this.formData,function (res) {
                    location.href = "orders_check_pending.html";
                })
            },
            updates(index,row){
                let _this = this;
                _this.dialogTableVisibleCarParts = true;
                _this.updateBtn = true;
                _this.addBtn = false;
                _this.updateCarIndex = index
                _this.carPartsForm = row[index];
            },
            updateCar(){
                let _this = this;
                _this.dialogTableVisibleCarParts = false;
                _this.particularsData[_this.updateCarIndex].ordercount = _this.carPartsForm.ordercount;
            },
            //删除
            deletes(index,data){
                data.splice(index,1);
            },
            //判断日期
            ifDate(){
                if (this.formData.createTime < new Date()){
                    this.$message({
                        message: '日期不能小于当前日期',
                    })
                    this.formData.createTime = "";
                }
            },
            //查看全部零件
            lookCarParts(){
                let _this = this;
                _this.dialogTableVisible = true;
                _this.statusSelect = 0;
                selectAjax("get", '/carpartstable/listLimit',{page: _this.page, limit: _this.limit }, _this.tableData03)
            },
            tableData03(data){
                this.tableData3 = data.data.data;
                this.total = data.data.total;
            },
            //选择零件
            selectCarParts(row){
                let _this = this;
                _this.dialogTableVisibleCarParts = true;
                _this.updateBtn = false;
                _this.addBtn = true;
                _this.carPartsForm = row;
                _this.carPartsForm.partstableId = row.id;
                _this.carPartsForm.price = row.saleprice;
            },
            //添加零件
            submitCar(){
                let _this = this;
                _this.dialogTableVisible = false;
                _this.dialogTableVisibleCarParts = false;
                if (_this.particularsData.length == 0) {
                    _this.particularsData.push(_this.carPartsForm);
                    return;
                }

                for (let i = 0; i < _this.particularsData.length; i++){
                    if (_this.carPartsForm.partcode.indexOf(_this.particularsData[i].partcode) == 0){
                        _this.particularsData[i].ordercount = parseInt(_this.particularsData[i].ordercount) + parseInt(_this.carPartsForm.ordercount);
                        return;
                    }
                }
                _this.particularsData.push(_this.carPartsForm);
            },
            //查看客户信息
            lookOver(){
                let _this = this;
                _this.innerVisible = true;
                _this.statusSelect = 1;
                selectAjax("get", '/clienttable/list',{page: _this.page, limit: _this.limit }, _this.clientData2)
            },
            clientData2(data){
                this.clientData = data.data.data;
                this.total = data.data.total;
            },
            //客户详情
            clientParticulars(id){
                let _this = this;
                _this.innerVisibleClient = true;
                selectAjax("get", '/clienttable/getById/'+id, null, function (data) {
                    _this.clientForm = data.data;
                })
            },
            //选择客户
            selectClient(row){
                let _this = this;
                _this.formData.clientId = row.id;
                _this.formData.clientName = row.clientname;
                _this.innerVisible = false;
            },
            //随机编号
            generateRandomValue() {
                let data = '';
                let randomNumber;
                let randomChar;
                var randomNum = Math.floor(Math.random() * (10 - 5 + 1)) + 5;
                // console.log("for ====i===>"+randomNum)
                for (let i = 0; i < randomNum; i++) {
                    if (i % 2 == 0) {
                        randomNumber = Math.floor(Math.random() * 10); // 生成一个0到9之间的随机整数
                        data += randomNumber;
                    } else {
                        randomNumber = Math.floor(Math.random() * 10); // 生成一个0到9之间的随机整数
                        data += randomNumber;
                    }
                }
                // console.log(data)
                // this.employeetable.employeenumber = data
                // this.ifEmployeetableNumber(data)
                return data; // 将数字和字符转换为字符串并连接
            },
            //分页
            handleSizeChange(val) {
                let status = this.statusSelect;
                this.limit = val;
                if (status == 0){
                    this.lookCarParts();
                }else if (status == 1)
                    this.lookOver();

            },
            handleCurrentChange(val) {
                let status = this.statusSelect;
                this.page = val;
                if (status == 0){
                    this.lookCarParts();
                }else if (status == 1)
                    this.lookOver();
            },

            closePage(statusSelect) {
                this.page = 1;
                this.limit = 5;
                this.total = 0;
                this.currentPage1 = 1;
                this.statusSelect = statusSelect;
            }
        },
        mounted() {

        },
        watch:{
            /*innerVisible(val){
                if (!val){
                    this.closePage(0);
                    this.lookCarParts();
                }
            }*/
        }
    })
</script>
</body>
</html>